<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="100px">
        <h3>组件列表</h3>
        <draggable
          v-model="myArray"
          :group="{ name: 'people', pull: 'clone', put: false, move: false}"
          @start="dragging=true"
          @end="dragging=false"
          @change="log"
          :move="checkMove"
          item-key="id">
          <template #item="{element}">
            <div class="list-group-item">{{ element.name }}</div>
          </template>
        </draggable>
      </el-aside>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <h3>Draggable 2</h3>
            <draggable
              v-model="myArray2"
              group="people"
              @start="dragging=true"
              @end="dragging=false"
              @change="log"
              item-key="id">
              <template #item="{element}">
                <div class="list-group-item">{{ element.name }}</div>
              </template>
            </draggable>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable'
export default defineComponent({
  name: 'TestDraggable',
  components: { draggable },
  setup() {
    let data = reactive({
      dragging: false,
      myArray: [
        { id: 1, name: '组件1'},
        { id: 2, name: '组件2'},
        { id: 3, name: '组件3'},
        { id: 4, name: '组件1'},
      ],
      myArray2: [
        { id: 1, name: '张'},
        { id: 2, name: '李'},
        { id: 3, name: '王'},
        { id: 4, name: '赵'},
      ]
    })

    function log(e) {
      console.log(e)
    }

    function add() {
      data.myArray.push({id: 5, name: '赵六'})
    }

    function replace() {
      data.myArray = [
        {id: 8, name: '小王'}
      ]
    }

    function checkMove(e) {
      console.log('e@', e.draggedContext.futureIndex)
    } 

    return { ...toRefs(data), log, add, replace, checkMove }
  }
})
</script>

<style scoped>
.list-group-item {
  cursor: move;
}
</style>
